<!-- 游戏输赢 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showExport="true" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @reset="onHideDetails(true)" @download="getExport"
    @changeTh="data.dialogVisible = true">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
      <el-form-item label="游戏：">
        <el-select v-model="data.query.game_id" placeholder="请选择" filterable>
          <el-option label="全部" :value="-1" />
          <el-option v-for="item in indexStore.gameArray" :key="item.value" :label="'【' + item.value + '】' + item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="高倍返奖倍数：">
        <el-input-number :min="1" :max="100000" :precision="0" v-model="data.query.bonus_multiple"
          placeholder="请输入高倍返奖倍数" clearable :controls="false" />
      </el-form-item>
      <el-form-item label="日期时间：">
        <el-date-picker v-model="data.query.date" type="date" range-separator="-" placeholder="请选择时间"
          value-format="YYYY-MM-DD" clearable />
      </el-form-item>
    </template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip :sortable="item.sortable ? true : false">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                <div v-html="item.tips"></div>
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <div class="gameIcon">
              <div><img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt=""></div>
              {{ selectToLabel(indexStore.gameArray, scope.row.game_id) }}
            </div>
          </template>
          <template v-if="item.prop == 'bonus_multiple_count'" #default="scope">
            <span class="item_details" @click="checkDetails(scope.row)">
              {{ scope.row.bonus_multiple_count }}
            </span>
          </template>
          <template v-if="item.prop == 'game_income'" #default="scope">
            <span :class="colorClass(scope.row.game_income)">
              {{ BigWan(scope.row.game_income) }}</span>
          </template>
          <template v-if="item.prop == 'history_game_income'" #default="scope">
            <span :class="colorClass(scope.row.history_game_income)">
              {{ BigWan(scope.row.history_game_income) }}</span>
          </template>
          <template v-if="item.prop == 'game_bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.game_bet) }}</span>
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 人数详情 -->
  <el-dialog v-model="data.isShowDetails" width="85%" title="人数详情" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="10vh">
    <div class="dialogMax">
      <SearchTable :query="data.queryDetails" :list="data.listDetails" :total="data.totalDetails" :showSet="false"
        :showFromQuery="false" @changeSize="changeSizeDetails" @changePage="changePageDetails"
        @reset="onHideDetails(true)" @search="getSearchDetailsList">
        <template #form>
          <el-form-item label="">
            <p class="box-title mustPass gameIcon">
              【{{ data.query.date }}】 <img class="game-icon" :src="selectToLabel(GAMEICON, data.checkedItem.game_id)"
                alt="">
              {{ selectToLabel(indexStore.gameArray, data.checkedItem.game_id) }}
            </p>
            <span class="marginL20">高倍返奖总人数：<span class="mustPass">{{ data.checkedItem.bonus_multiple_count }}</span>人</span>
          </el-form-item>
        </template>
        <template #table>
          <template v-for="(item, index) in data.fieldDetails" :key="index">
            <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
              show-overflow-tooltip>
              <template #header>
                <el-tooltip v-if="item.tips" effect="dark" placement="top">
                  <template #content>
                    {{item.tips}}
                  </template>
                  <el-icon class="ques-tips">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
                {{ item.label }}
              </template>
              <template v-if="item.prop == 'save_time_stamp'" #default="scope">
                {{ setTimestampTime(scope.row.save_time_stamp) }}
              </template>
              <template v-if="item.prop == 'bet'" #default="scope">
                <span :class="colorClass(scope.row.bet)">
                  {{ BigWan(scope.row.bet) }}</span>
              </template>
              <template v-if="item.prop == 'win'" #default="scope">
                <span :class="colorClass(scope.row.win)">
                  {{ BigWan(scope.row.win) }}</span>
              </template>
              <template v-if="item.prop == 'bonus_multiple_count'" #default="scope">
                <span class="colorText">
                  {{ BigInteger(BigDiv(scope.row.win,scope.row.bet)) }}</span>
              </template>
            </el-table-column>
          </template>
          <!-- <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button type="primary" v-permiss="'/system/destroyManager'" size="small" @click="goUrl(scope.row)">
                查看游戏记录
              </el-button>
            </template>
          </el-table-column> -->
        </template>
      </SearchTable>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
defineOptions({
  name: "gameWinning"
})
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { exportToExcel } from '@/utils/export'
import { getGameWin, getGameWinDetails } from '@/api/gameReport'
import { GAMEICON } from '@/config/eunm'
import { selectToLabel, colorClass } from '@/utils/index'
import { BigWan, RtpPercent, BigDiv, BigInteger } from '@/utils/math'
import { setTimestampTime, getDateDay, setTimeDateValue } from '@/utils/time'
import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useRouter } from 'vue-router'
const router = useRouter()
const data = reactive({
  query: {
    page: 1,
    size: 50,
    agent_id: -1,
    operated_id: -1, // 商户id
    game_id: -1, // 游戏id
    currency_id: -1, // 货币id
    bonus_multiple: 50,
    date: getDateDay(0)
  },
  list: [],
  total: 0,
  fields: [
    { label: '游戏名称', prop: 'game_id', width: '200', visible: true, tips: '游戏名称的描述说明' },
    { label: '当天输赢', prop: 'game_income', width: '', visible: true, sortable: true, tips: '游戏在筛选日期的当天输赢情况正为盈利、负为亏损' },
    { label: '历史输赢', prop: 'history_game_income', width: '', visible: true, sortable: true, tips: '游戏历史总输赢情况正为盈利、负为亏损跟筛选日期无关' },
    { label: '投注用户', prop: 'valid_user', width: '150', visible: true, sortable: true, tips: '游戏当天有过下注行为的玩家数量去重' },
    { label: '投注金额', prop: 'game_bet', width: '', visible: true, sortable: true, tips: '游戏当天的下注金额总和' },
    { label: '游戏次数', prop: 'game_count', width: '150', visible: true, sortable: true, tips: '玩家当天在游戏的游戏次数' },
    { label: '高倍返奖人数', prop: 'bonus_multiple_count', width: '170', visible: true, sortable: true, tips: '分游戏统计爆大奖的人数，点击可查看人数详情<br/>大奖默认倍数为50倍可在上方输入框自定义编辑' },
    { label: 'RTP', prop: 'rtp', width: '150', visible: true, tips: '游戏当天的回报率值越高玩家盈利越多，值越低平台盈利越多', },
    { label: '历史RTP', prop: 'history_rtp', width: '150', visible: true, tips: '游戏的历史回报率无关筛选日期值越高玩家盈利越多，值越低平台盈利越多', }
  ],
  dialogVisible: false,
  exportLoading: false,
  checkedItem: {} as any,
  isShowDetails: false,
  queryDetails: {
    page: 1,
    size: 50,
    agent_id: -1,
    operated_id: -1, // 商户id
    game_id: -1, // 游戏id
    currency_id: -1, // 货币id
    bonus_multiple: 50,
    date: getDateDay(0)
  },
  listDetails: [],
  totalDetails: 0,
  fieldDetails: [
    { label: '日期', prop: 'save_time_stamp', width: '180', visible: true, tips: '筛选日期展示' },
    { label: '平台ID', prop: 'account_id', width: '150', visible: true, tips: '玩家ID编号，唯一' },
    { label: '下注金额', prop: 'bet', width: '', visible: true, tips: '高倍返奖当局的下注金额' },
    { label: '返奖金额', prop: 'win', width: '', visible: true, tips: '高倍返奖当局的返奖金额' },
    { label: '倍数', prop: 'bonus_multiple_count', width: '150', visible: true, tips: '当局返奖倍数' },
  ]
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  let query = JSON.parse(JSON.stringify(data.query))
  query = setTimeDateValue(query)
  indexStore.setPageLoading(true)
  query.bonus_multiple = Number(query.bonus_multiple)
  let res = await getGameWin(query)
  indexStore.setPageLoading(false)
  res.data?.forEach((item: any) => {
    item.rtp = RtpPercent(BigWan(item.game_win), BigWan(item.game_bet))
    item.history_rtp = RtpPercent(BigWan(item.history_game_win), BigWan(item.history_game_bet))
  })
  data.list = res.data
}

// 查看详细信息
const checkDetails = async (row: any) => {
  if (!row.bonus_multiple_count) return ElMessage.error('暂无数据')
  data.queryDetails.date = data.query.date
  data.queryDetails.game_id = row.game_id
  data.queryDetails.agent_id = data.query.agent_id
  data.queryDetails.bonus_multiple = data.query.bonus_multiple
  data.isShowDetails = true
  data.checkedItem = row
  getSearchDetailsList()
}

const getSearchDetailsList = async () => {
  let query = JSON.parse(JSON.stringify(data.queryDetails))
  query = setTimeDateValue(query)
  indexStore.setPageLoading(true)
  let res = await getGameWinDetails(query)
  indexStore.setPageLoading(false)
  res.data?.list?.forEach((item: any) => {
    item.date = data.query.date
  })
  data.listDetails = res.data.list
  data.totalDetails = res.data.total
}

// 跳转
const goUrl = async (row: any) => {
  router.push({ name: 'gameRecord', state: { date: data.query.date, game_id: data.checkedItem.game_id, account_id: row.account_id } });
}

// 导出
const getExport = async () => {
  let query = JSON.parse(JSON.stringify(data.query))
  query.page = 1
  query.size = 10000
  let res = await getGameWin(query)
  let dataList = res.data
  let header: string[] = []
  let list: never[][] = []

  data.fields?.forEach((item) => {
    header.push(item.label)
  })
  dataList?.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    data.fields?.forEach((x) => {
      switch (x.prop) {
        case 'game_id':
          arr.push(selectToLabel(indexStore.gameArray, item[x.prop]) as never)
          break
        case 'win_lose':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'history_game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'game_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'rtp':
          arr.push(RtpPercent(BigWan(item['game_win']), BigWan(item['game_bet'])) as never)
          break
        case 'history_rtp':
          arr.push(RtpPercent(BigWan(item['history_game_win']), BigWan(item['history_game_bet'])) as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })
  exportToExcel(list, header, '游戏输赢')
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
  getSearchList()
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changePageDetails = (val: number) => {
  data.queryDetails.page = val
  getSearchDetailsList()
}
const changeSizeDetails = (val: number) => {
  data.queryDetails.size = val
  getSearchDetailsList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.isShowDetails = false
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      agent_id: -1,
      operated_id: -1,
      game_id: -1,
      currency_id: -1,
      bonus_multiple: 50,
      date: getDateDay(0)
    }
    OperatorRef.value.onHideDetails()
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>
